<template>
	<view class="con">
		<view class="bgF3F5F7 ra20 flex-a-i">
			<view class="flex-a-i  flex1 ra20 height80">
				<image mode="widthFix" src="/static/sou.png" class="image mr20 ml30 width40"></image>
				<input confirm-type="search"  @confirm="tapsearch" placeholder-style="color:#999;" class="size28 flex1" v-model="root" placeholder="请输入要查询的单词、词根" />
			</view>
		</view>
	</view>
	<view class="flex-ju-b pt30 size24">
	<view>
	<view class="flex-ju-b  pl30 posire zindex5 bgfff ">
		<view @click="isall= !isall" class="flex-ju-b size24 pg5-20 bgf9f9f9 ra30">
			<text v-if="aindex==0">全部 {{info.allRootCount}}</text>
			<text v-else-if="aindex==1">已学习 {{info.learnedRootCount}}</text>
			<text v-else-if="aindex==2">未学习 {{info.notStudiedRootCount}}</text>
			<text v-else>已斩 {{info.collectionRootCount}}</text>
			
			<image v-if="isall" mode="widthFix" src="/static/xiangtop.png" class="image width32 ml10"></image>
			<image v-else mode="widthFix" src="/static/bottoms.png" class="image width32 ml10"></image>
		</view>
	</view>
	<view  @click="isall = false" v-if="isall" class="posifi mkds zindex5 mt30" style="background: rgba(0,0,0,0.6);">
		<view class="bgfff size28 pl30 " style="border-bottom-left-radius: 15px;border-bottom-right-radius: 15px;">
			<view @click.stop="tabcount(0)" :class="{active:aindex==0}" class="border-bECEDEE height90 flex-a-i">全部 {{info.allRootCount}}</view>
			<view @click.stop="tabcount(1)" :class="{active:aindex==1}" class="border-bECEDEE height90 flex-a-i">已学习 {{info.learnedRootCount}}</view>
			<view @click.stop="tabcount(2)" :class="{active:aindex==2}" class="border-bECEDEE height90 flex-a-i">未学习 {{info.notStudiedRootCount}}</view>
			<view @click.stop="tabcount(3)" :class="{active:aindex==3}" class="border-bECEDEE height90 flex-a-i">已斩 {{info.collectionRootCount}}</view>
		</view>
	</view>
	</view>		
	<view @click="allopen" class="color666 mr30">全部{{iskai?'收起':'展开'}}</view>
	</view>
	
	<view class="con">
		<nodata v-if="isdata"></nodata>
		
		<uni-collapse ref="collapse" v-model="open"  class="viewcollapse" @change="change" >
			<uni-collapse-item :show-arrow="false" v-for="(item,index) in info.rootInfoDos" :key="index" @click.stop="zhaoa(item,index)" class="pb30 border-bECEDEE mt30" title-border="none" :name="'key'+index">
					<template v-slot:title>
						<view @click.stop="navto('root_detail?id='+item.rootId+'&type=1&arrid='+arrid)" class="flex-ju-b mb20 ">
							<view class="ra32 bold " :class="{color666:item.learnStatus}" >{{item.root}}</view>
							<view>
								<view class="flex-a-i ">
									<view @click.stop="voice(item.audioUrl)" class="bgF9F9F9 pg2-20 ra30 height40 flex-ju-c">
										<image mode="widthFix" src="/static/yuyin.png" class="image width28"></image>
									</view>
									<view @click.stop="tapopen(item,index)" class="bgF9F9F9 pg2-20 ra30 ml20 height40 flex-ju-c">
										<image mode="widthFix" :src="item.isCollect?'/static/xings.png':'/static/xing.png'" class="image width28"></image>
									</view>
								</view>
							</view>
						</view>
						<view  class="flex-ju-b color666">
							<view class=" size24 one flex1">{{item.meaning}}</view>
							<view class="flex-a-i size22">
								{{item.zhan?'收起':'展开'}}
								<image v-if="item.zhan" mode="widthFix" src="/static/xiangtop.png" class="flex image width32"></image>
								<image v-else mode="widthFix" src="/static/xiangxia.png" class="flex image width32"></image>
							</view>
						</view>
					</template>
					<view class="content">
						<view class="flex-a-i flex-wrap size24">
							<view :class="{color666:items.learnStatus}"  v-for="(items,s) in item.wordsDtoList" :key="s" class="mt20 color222 pg5-20 borderD8D8D8 ra30 mr20">{{items.word}}</view>
						</view>
					</view>
				</uni-collapse-item>
			</uni-collapse>
		
		<!-- <view v-for="(item,index) in info.rootInfoDos" :key="index"  class="border-bECEDEE pb30 mt30">
				<view class="flex-ju-b mb20" @click="navto('root_detail?id='+item.rootId+'&type=1&arrid='+arrid)">
					<view class="ra32 bold " :class="{color666:item.learnStatus}">{{item.root}}</view>
					<view>
						<view class="flex-a-i">
							<view @click.stop="voice(item.audioUrl)" class="bgF9F9F9 pg2-20 ra30 height40 flex-ju-c">
								<image mode="widthFix" src="/static/yuyin.png" class="image width28"></image>
							</view>
							<view @click.stop="tapopen(item)" class="bgF9F9F9 pg2-20 ra30 ml20 height40 flex-ju-c">
								<image mode="widthFix" :src="item.isCollect?'/static/xings.png':'/static/xing.png'" class="image width28"></image>
							</view>
						</view>
					</view>
				</view>
				<uni-collapse ref="collapse" @change="change($event,item)">
					<uni-collapse-item  title-border="none">
						<template v-slot:title>
							<view class="flex-ju-b color666">
								<view class=" size24 one flex1">{{item.meaning}}</view>
								<view class="flex-a-i size22">
									{{item.zhan?'收起':'展开'}}
								</view>
							</view>
						</template>
						<view class="content">
							<view class="flex-a-i flex-wrap size24">
								<view :class="{color666:items.learnStatus}" v-for="(items,s) in item.wordsDtoList" :key="s" class="mt20 pg2-20 border000 ra20 mr20">{{items.word}}</view>
							</view>
						</view>
					</uni-collapse-item>
				</uni-collapse>
				
		</view> -->
		
		<add ref="add" @collection="collection" :type="type" :wordId="addrootid"></add>
	</view>
	
	
</template>

<script>
	export default {
		data() {
			return {
				iskai:false,
				open:[],
				close:[],
				isdata:false,
				aindex:0,
				root:"",
				item:{},
				id:"",
				type:"",
				addrootid:"",
				page:1,
				atype:"",
				isall:false,
				arrid:[],
				info:{
					rootInfoDos:[]
				}
			}
		},
		onReachBottom() {
			this.page++
			this.getlist()
		},
		onLoad(option) {
			this.id=option.id
			this.getlist()
			this.atype=option.type
			
		},
		methods: {
			zhaoa(item,index){
				if(item.zhan){
					item.zhan = false
				}else{
					item.zhan = true
				}
			},
			allopen(){
				this.iskai = !this.iskai
				
				if(this.iskai){
					this.open=this.close
					this.info.rootInfoDos.map(item=>{
						item.zhan = true
					})
				}else{
						this.open=[]
						this.info.rootInfoDos.map(item=>{
							item.zhan = false
						})
				}
				
			},
			tabcount(index){
				this.page=1
				this.aindex=index
				this.info.rootInfoDos=[]
				this.getlist()
			},
			getlist(){
				this.http('/api/course/detail',{
					courseId:this.id,
					status:this.aindex,
					root:this.root,
					pageNo:this.page,
					pageSize:200
				},'post').then(res=>{
					uni.setNavigationBarTitle({
						title: res.data.courseName,
					});
					if(!res.data.rootInfoDos){
						res.data.rootInfoDos=[]
					}
					res.data.rootInfoDos = [...this.info.rootInfoDos,...res.data.rootInfoDos]
					
					this.info = res.data
					this.nodata(this.info.rootInfoDos,this)
					this.isall = false
					var arrid=[]
					res.data.rootInfoDos.map((item,index)=>{
						arrid.push(item.rootId)
						 this.close.push('key'+index)
					})
					this.arrid = arrid
					
				})
			},
			tapsearch(){
				this.page=1
				this.info.rootInfoDos=[]
				this.getlist()
			},
			change(e,item){
				
				// #ifdef MP
				this.$nextTick(() => {
					this.$refs.collapse.resize()
				})
				// #endif
			},
			collection(){
				
				this.item.isCollect=1
				this.toast('收藏成功')
			},
			tapopen(item){
				if(item.isCollect==1){
					this.http('/api/folder_favorite_relation/cancel',{
						entryId:item.rootId,
						type:2
					}).then(res=>{
						this.toast('已取消')
						item.isCollect=0
					})
				}else{
					this.type=2
					this.addrootid = item.rootId
					this.item=item
					setTimeout(()=>{
						this.$refs.add.open(1)
					},10)
				}
			}
		}
	}
</script>

<style>
	/* /deep/ .viewcollapse .uni-collapse-item__title-arrow{
		margin-top: 60rpx;	
		margin-right: -1px;
	}
	/deep/ .uni-collapse-item--animation{
		margin-right: 0;
	} */
.mkds{
	width: 100vw;
	height: 100vh;
}
.active{
	color: #FD2F55;
}
</style>
